div.appViewerHolder {
  /* This is over-ridden by an inline style but we just have it here in case */
  --app-scale-amnt: 0.24;

  --animation-speed: 0.25s;
  --animation-speed-timing: var(--animation-speed) ease;
  --expand-btn-size: 1rem;

  /* These take effect in LogsViewer.module.css but depend on the expansion so we set them here */
  --logs-font-size: 0.65rem;
  --logs-padding: var(--vertical-spacing);

  /* Sizes */

  /* How much in from the edges should the expanded app be? */
  --expanded-inset-horizontal: 70px;
  --expanded-inset-top: 70px;
  --expanded-inset-bottom: calc(70px + var(--logs-offset-expanded));

  /* How much in from the edges should the shrunken app be? */
  --preview-inset-horizontal: 10px;
  --preview-inset-top: 10px;
  --preview-inset-bottom: calc(
    var(--preview-inset-top) + var(--logs-button-h) + var(--logs-offset)
  );

  /* How tall should the tab to expand the logs be? */
  --logs-button-h: 28px;
  /* How much of the logs page should be peaking out from bottom of the container? */
  --logs-offset: 0px;
  --logs-offset-expanded: 30px;

  /* Sizes of the app when expanded. Used to scale the preview window without triggering a resize */
  --app-expanded-w: calc(100vw - var(--expanded-inset-horizontal) * 2);
  --app-expanded-h: calc(
    100vh - var(--expanded-inset-top) - var(--expanded-inset-bottom)
  );

  /* Size of the app window when shrunk down */
  --app-preview-w: calc(var(--app-expanded-w) * var(--app-scale-amnt));
  --app-preview-h: calc(var(--app-expanded-h) * var(--app-scale-amnt));

  /* Height of the app window in preview mode */
  height: calc(
    var(--app-preview-h) + var(--preview-inset-top) +
      var(--preview-inset-bottom)
  );

  position: relative;
  /* Don't let the app logs drawer cause the main div to be larger than it
  should be */
  overflow: hidden;
}

.title {
  /* z-index: 0; */
  /* display: flex; */
  position: relative;
}

.appViewerHolder[data-expanded="true"] {
  --expand-btn-size: 1.5rem;

  --logs-font-size: 0.9rem;
  --logs-padding: 32px;

  --viewer-h: 1fr;
  --logs-button-h: 30px;

  --logs-offset: 35px;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  background-color: hsl(var(--rstudio-grey-hsl) / 0.15);
  backdrop-filter: blur(6px);

  transition: all var(--animation-speed-timing);
  /* This overwrites the "all" above and only makes transitions occur on
  specified properties */
  transition-property: backdrop-filter background-color;
}

.appContainer {
  display: grid;
  place-content: center;
}

.appViewerHolder[data-expanded="false"] > .appContainer {
  position: absolute;
  top: var(--preview-inset-top);
  right: var(--preview-inset-horizontal);
  width: var(--app-preview-w);
  height: var(--app-preview-h);
}

.appViewerHolder[data-expanded="true"] > .appContainer {
  position: absolute;
  inset-inline: var(--expanded-inset-horizontal);
  top: var(--expanded-inset-top);
  height: var(--app-expanded-h);
}

.previewFrame {
  background-color: var(--rstudio-white);
  width: var(--app-expanded-w);
  height: var(--app-expanded-h);
  transform: scale(var(--app-scale-amnt));
  border: 1px solid var(--outline-color);
  display: block;
  /* Ever-so-slightly soften corners */
  border-radius: 2px;
}

.appViewerHolder[data-expanded="true"] .previewFrame {
  transform: scale(1);
  transition: transform var(--animation-speed-timing);
  border: none;
  box-shadow: var(--shadow-elevation-medium);
}

.appViewerHolder[data-expanded="false"] .previewFrame {
  /* Don't reverse the growing animation, just snap back to smaller */
  transition: none;
}

/* ====== Buttons ========================================== */

.expandButton,
.reloadButtonContainer {
  position: absolute;
  background-color: transparent;
  outline: none;
  border: none;
  transition-property: opacity, color, transform;
  transition-duration: 0.25s;
  transition-timing-function: ease-in;
}

.reloadButtonContainer {
  height: var(--header-height);
  width: var(--header-height);
  top: 0;
  left: 0;
  bottom: 0;
  /* outline: 1px solid pink; */
  /* --normal-transform: scaleY(-1) var(--expand-scale, scale(1)) rotate(90deg);
  transform: var(--normal-transform); */
}

.reloadButton {
  color: currentColor;
  font-size: 1.5rem;
  height: 100%;
  width: 100%;
  aspect-ratio: 1;
  background-color: transparent;
}

.reloadButton > svg {
  scale: -1 1;
}
.reloadButton:hover > svg {
  scale: -1.1 1.1;
}

/* When this class is added to the reload button it will cause it to spin
around, showing the user that their click actually did something */
.spin {
  animation-duration: 1s;
  animation-name: spin;
}

@keyframes spin {
  from {
    rotate: 0deg;
  }

  to {
    rotate: 360deg;
    animation-timing-function: ease-out;
  }
}

.appViewerHolder .reloadButtonContainer {
  /* Hide reload button in the main panel until we're in full screen mode. We
  have two reload buttons because the reload button in the header isn't
  available in that zoom level */
  display: none;
}

.expandButton {
  width: 100%;
  height: 100%;
  font-size: 50px;
  opacity: 0;
  color: transparent;
}

.expandButton:hover {
  color: inherit;
  opacity: 1;
  transform: scale(1.1);
}

.restartButton {
  width: fit-content;
  margin-inline: auto;
}

.appViewerHolder[data-expanded="true"] .expandButton,
.appViewerHolder[data-expanded="true"] .reloadButtonContainer {
  width: var(--expanded-inset-left);
  height: var(--expanded-inset-top);
  font-size: 2.5rem;
  opacity: 1;
  position: fixed;
  top: 0;
  display: block;
}

.appViewerHolder[data-expanded="true"] .expandButton {
  color: inherit;
  right: 0;
}

.appViewerHolder > h2 {
  color: var(--rstudio-grey);
  text-align: center;
  font-style: italic;
}

.loadingMessage {
  display: grid;
  place-content: center;
  width: 100%;
  height: 100%;
  padding: 1rem;
}
.loadingMessage > h2 {
  text-align: center;
}

h2.error {
  color: var(--red);
}
